<template>
  <div>
    <div class="nav">
      <!-- 顶部导航栏 -->
      <van-nav-bar title="全部分类" @click-left="onClickLeft" left-arrow>
        <template #right>
          <van-icon name="cart-o" @click="cart()" size="18" />
        </template>
      </van-nav-bar>
      <!-- 一级分类 -->
      <div class="classify-item">
        <div>
          <van-tabs v-model="active" @click="titleClick" class="class-tab">
            <van-tab class="title-text" v-for="(item,index) in titleArr" :title="item" :key="index"></van-tab>
          </van-tabs>
        </div>
        <div>
          <van-icon class="class-icon" @click="allClass" name="arrow-down" />
        </div>
      </div>
      <!-- 展开全部分类弹出框 -->
      <van-popup class="class-pop" position="top" v-model="classShow">
        <h2 class="class-title">选择分类</h2>
        <div class="class-arrange">
          <div @click="titleClick(index,item)" v-for="(item,index) in titleArr" :key="index">
            <div class="class-item" v-text="item"></div>
          </div>
        </div>
      </van-popup>
      <!-- 二级分类 -->
      <div>
        <van-tabs @click="subheadClick">
          <van-tab v-for="(item,index) in  subhead" :title="item.name" :key="index"></van-tab>
        </van-tabs>
      </div>

      <!-- 排序方式 -->
      <div class="resort">
        <div>综合</div>
        <div @click="sale()">销量</div>
        <div @click="price()">价格</div>
        <div @click="showPopup">
          筛选
          <van-icon name="filter-o" />
        </div>
        <!-- 筛选弹出框 -->
        <van-popup class="popup" v-model="show" position="right">
          <h2 class="popup-title">价格</h2>
          <div>
            <input class="popup-inp" v-model="popupnum1" placeholder="最低价" />
            <span>-</span>
            <input class="popup-inp" v-model="popupnum2" placeholder="最高价" />
          </div>
          <div>
            <input class="popup-inp" type="radio" value="1" name="1" />0-30元
            <br />
            <input class="popup-inp" type="radio" value="2" name="1" />30-90元
            <br />
            <input class="popup-inp" type="radio" value="3" name="1" />90-120元
            <br />
            <input class="popup-inp" type="radio" value="4" name="1" />120-150元
          </div>
          <van-button class="pop-btn" type="info" @click="popClick()" round size="large">提交</van-button>
        </van-popup>
      </div>
    </div>
    <!-- 全部选择分类展示 -->
    <div class="good-all">
      <div
        @click="goodDetail(index)"
        class="goods-detail"
        v-for="(item,index) in goods"
        :key="index"
      >
        <div>
          <img class="good-img" :src="item.productPicList[0]" />
        </div>
        <div class="good-name">{{item.name}}</div>
        <div class="good-price">
          <div class="price">￥{{item.price}}</div>
          <div class="oldprice">￥{{item.oldPrice}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  // 主页跳转时根据选择的类型展示对应的产品
  mounted() {
    this.active = this.$route.query.id;
    console.log('图标编号', this.$route.query.id);
    axios({
      method: 'post',
      url: '/api/findTwoCategories/' + (this.$route.query.id + 1)
    }).then(res => {
      console.log(res);
      this.subhead = res.data.data;
    });
    axios({
      method: 'post',
      url: '/api/productSyn/' + (this.$route.query.id + 1)
    }).then(res => {
      console.log(res);
      this.goods = res.data.data;
      console.log(this.goods);
    });
  },
  methods: {
    // 商品详情页数据展示
    goodDetail(index) {
      console.log('商品ID', this.goods[index].id);
      this.$router.push({
        name: '商品详情',
        query: {
          cardId: this.goods[index].id,
          id: this.goods[index].productNum,
          nowPrice: this.goods[index].price,
          old: this.goods[index].oldPrice
        }
      });
    },
    // 展开全部分类弹出层
    allClass() {
      this.classShow = true;
    },
    // 筛选选项
    showPopup() {
      this.show = true;
    },
    // 商城主页跳转
    onClickLeft() {
      this.$router.push({
        name: '商城'
      });
    },
    // 跳转购物车
    cart() {
      this.$router.push({
        name: '购物车'
      });
    },
    // 一级分类根据类型展示不同的商品
    titleClick(name, title) {
      this.classShow = false;
      this.active = name;
      console.log(name);

      axios({
        method: 'post',
        url: '/api/productSyn/' + (name + 1)
      }).then(res => {
        console.log(res);
        this.goods = res.data.data;
        console.log(this.goods);
      });
      // 请求二级分类目录
      axios({
        method: 'post',
        url: '/api/findTwoCategories/' + (name + 1)
      }).then(res => {
        console.log('二级分类目录', res);
        this.subhead = res.data.data;
      });
    },
    // 二级分类根据类型展示不同的商品
    subheadClick(name, title) {
      console.log('一级分类请求的id', this.subhead[name].id);
      this.$router.push({
        name: '二级分类',
        query: {
          second: title,
          subheadId: this.subhead[name].id
        }
      });
    },
    // 根据销量排序
    sale() {
      console.log('销量');
      for (let i = 0; i < this.goods.length - 1; i++) {
        for (let j = i + 1; j < this.goods.length; j++) {
          if (this.goods[j].sellCount < this.goods[i].sellCount) {
            let temp = this.goods[j];
            this.goods[j] = this.goods[i];
            this.goods[i] = temp;
          }
        }
      }
    },
    // 根据价格排序
    price() {
      console.log('价格');
      console.log(this.goods[1].price);
      for (let i = 0; i < this.goods.length - 1; i++) {
        for (let j = i + 1; j < this.goods.length; j++) {
          console.log(this.goods[i].price);
          console.log(this.goods[j].price);
          if (this.goods[j].price < this.goods[i].price) {
            let temp = this.goods[j];
            this.goods[j] = this.goods[i];
            this.goods[i] = temp;
          }
        }
      }
      console.log(this.goods);
    },
    //根据筛选排序
    popClick() {}
  },
  data() {
    return {
      classShow: false,
      popcount: [0, 30, 90, 120, 150],
      popupnum1: '',
      popupnum2: '',
      show: false,
      active: 0,
      subheadNum: 0,
      subhead: ['休闲杆', '高端杆', '黑坑竞技'],
      titleArr: [
        '鱼竿',
        '饵料',
        '鱼线',
        '鱼钩',
        '配件',
        '竿包鱼护',
        '垂钓工具',
        '抄网支架',
        '钓箱钓椅',
        '盒子',
        '防晒',
        '夜钓',
        '休闲户外',
        '黑坑',
        '鱼轮',
        '路亚',
        '海钓',
        '筏钓',
        '冰钓',
        '配节售后'
      ],
      goods: []
    };
  }
};
</script>
<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.nav {
  background-color: white;
  position: sticky;
  top: 0;
}
.title-all {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.classify-item {
  display: flex;
}
.class-tab {
  width: 34rem;
}
.title-text {
  font-size: 2rem;
  font-weight: bolder;
}
.class-icon {
  margin-top: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
.title-img {
  width: 3rem;
  height: 3rem;
}
.shop-sort {
  display: flex;
  justify-content: space-between;
  margin-left: 2rem;
}
.good-img {
  width: 15rem;
  height: 15rem;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 1rem;
  margin-left: 1.5rem;
}
.goods-detail {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: white;
  width: 18rem;
  height: 25rem;
  display: flex;
  flex-direction: column;
}
.good-price {
  display: flex;
}
.resort {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}
.price {
  margin-left: 2rem;
  color: orangered;
}
.oldprice {
  color: gray;
  text-decoration-line: line-through;
  margin-left: 2rem;
}
.good-all {
  width: 37.5rem;
  background-color: rgb(250, 248, 248);
  display: flex;
  justify-content: start;
}
.good-name {
  height: 3rem;
  text-align: center;
}
/* 筛选选项页面样式 */
.popup {
  height: 100%;
  width: 50%;
}
.popup-inp {
  width: 8rem;
  height: 2rem;
  background-color: rgb(247, 243, 243);
  border-radius: 2rem;
  border: white 0.1rem solid;
  margin-left: 0.5rem;
  margin-top: 2rem;
  font-size: 1rem;
}
.popup-title {
  text-align: center;
  margin-top: 2rem;
}
.pop-btn {
  margin-top: 2rem;
  height: 3rem;
}
.class-pop {
  height: 60%;
  width: 100%;
}
.class-title {
  margin-top: 2rem;
  margin-left: 2rem;
}
.class-arrange {
  display: flex;
  width: 37.5rem;
  justify-content: start;
  flex-wrap: wrap;
}
.class-item {
  font-size: 1.5rem;
  text-align: center;
  width: 10rem;
  background-color: rgb(247, 240, 240);
  margin: 1.2rem;
  border-radius: 1rem;
}
</style>
